<template>
  <div class="flex flex-row gap-4">
    <div class="div01"></div>
    <div class="div02"></div>
    <div class="div03"></div>
  </div>
  <div class="div04 flex flex-row mt-4">
    <div></div>
    <div class="middle"></div>
    <div></div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
@use 'sass:math';
.div01 {
  $height: 50px;
  border-top: $height solid yellowgreen;
  border-bottom: $height solid deeppink;
  border-left: $height solid bisque;
  border-right: $height solid chocolate;
  width: $height;
}
.div02 {
  $height: 50px;
  border-top: $height solid transparent;
  border-bottom: $height solid deeppink;
  border-left: $height solid transparent;
  border-right: $height solid transparent;
  width: $height;
}
.div03 {
  $height: 50px;
  border-top: $height solid transparent;
  border-left: $height solid transparent;
  border-bottom: $height solid deeppink;
  border-right: $height solid deeppink;
  width: $height;
}
.div04 {
  $height: 50px;
  .middle {
    width: $height;
    height: $height;
    background-color: deeppink;
  }
  div:first-child {
    border-top: math.div($height, 2) solid transparent;
    border-left: math.div($height, 2) solid transparent;
    border-bottom: math.div($height, 2) solid deeppink;
    border-right: math.div($height, 2) solid deeppink;
    width: math.div($height, 2);
  }
  div:last-child {
    border-top: math.div($height, 2) solid transparent;
    border-left: math.div($height, 2) solid deeppink;
    border-bottom: math.div($height, 2) solid deeppink;
    border-right: math.div($height, 2) solid transparent;
    width: math.div($height, 2);
  }
}
</style>
